<template>
  <div class="search-game-body">
    <div class="search-tool">
      <input class="search-game-input" v-model="searchkey" type="text" placeholder="请输入内容">
      <input class="search-game-button" type="button" value="搜索" @click="getdata">
    </div>
  </div>
  <gamelist :gamelistdata="gamelistdata"/>
</template>

<script>
import gamelist from "../index/gamelist/gamelist.vue";
import {getgamedata} from "../../api/getdata";
export default {
  name: "index",
  data(){
    return {
      gamelistdata: [],
      searchkey: '',
      params: {}
    }
  },
  components: {
    gamelist
  },
  created() {
    this.searchkey = this.$route.query.searchkey
    this.getdata()
  },
  methods:{
    getdata(){
      this.params = {
        searchkey: this.searchkey
      }
      getgamedata(this.params).then(value => {
        this.gamelistdata = value.data
        console.log(value)
      })
    }
  }
}
</script>

<style scoped>
.search-game-body{
  width: 1500px;
  height: 100px;
  margin: 0 auto 50px;
}
.search-tool{
  position: absolute;
  width: 1500px;
  height: 50px;
  top: 10%;
  left: 50%;
  margin-left: -750px;
  opacity: 0.5;
  display: flex;
  background-color: #101822;
  margin-bottom: 80px;
}
.search-game-input{
  width: 20%;
  height: 80%;
  padding-left: 20px;
  font-size: 21px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  background-color: #223a4c;
  color: white;
}
.search-game-button{
  width: 10%;
  height: 80%;
  font-size: 21px;
  margin-top: 5px;
  background-color: #223a4c;
  color: #67c1f5;
}
.search-game-button:hover {
  background-color: #4887ab;
  color: white;
  cursor: pointer;
}
</style>
